<template>
  <view class="cash-form">
    <view class="tip">
      <view class="title">提现说明:</view>
      <view class="text">1, 每天可提现: <text>{{ data.set.day * 1 }}次</text></view>
      <view class="text">2, 提现服务费: <text>{{ data.set.service * 1 }}%</text></view>
      <view class="text">3, 您的可提金额: ￥<text>{{ data.balance * 1 }}</text></view>
      <view class="text">4, 最小提现金额: ￥<text>{{ data.set.mini * 1 }}</text></view>
    </view>
    <u-line></u-line>
    <u--form
        labelPosition="left"
        :model="postForm"
        :rules="rules"
        ref="uForm"
        class="form"
        labelWidth="160rpx"
        labelAlign="right"
        :labelStyle="{'font-size': '24rpx', 'padding-right': '20rpx', 'margin-top': '-3rpx'}"
    >
      <u-form-item label="银行名称:" prop="bank.bank_name">
        <u--input
            v-model="postForm.bank.bank_name"
            border="surround"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
        ></u--input>
      </u-form-item>
      <u-form-item label="开户行:">
        <u--input
            v-model="postForm.bank.bank_x"
            border="surround"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
        ></u--input>
      </u-form-item>
      <u-form-item label="卡号:" prop="bank.bank_number">
        <u--input
            v-model="postForm.bank.bank_number"
            border="surround"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
        ></u--input>
      </u-form-item>
      <u-form-item label="姓名:" prop="bank.nickname">
        <u--input
            v-model="postForm.bank.nickname"
            border="surround"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
        ></u--input>
      </u-form-item>
      <u-form-item label="预留手机:" prop="bank.mobile">
        <u--input
            v-model="postForm.bank.mobile"
            border="surround"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
        ></u--input>
      </u-form-item>
      <u-form-item label="提现金额:" prop="amount">
        <u--input
            v-model="postForm.amount"
            border="surround"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
            color="red"
        ></u--input>
      </u-form-item>
      <u-button type="success" class="btn" :color="activeColor" @click="save" text="保存"></u-button>
    </u--form>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import color from '@/config/color.js'
import base64 from '../../../util/base64'
import Service from '../../../api/service'
const serviceModel = new Service()
export default {
  data() {
    return {
      activeColor: color.main_color,
      rules: {
        'bank.nickname': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'bank.bank_name': {
          type: 'string',
          required: true,
          message: '请填写银行名称',
          trigger: ['blur', 'change']
        },
        // 'bank.bank_x': {
        //   type: 'string',
        //   required: true,
        //   message: '请填写银行开户行',
        //   trigger: ['blur', 'change']
        // },
        'bank.bank_number': {
          type: 'number',
          required: true,
          message: '请填写银行卡号,必须是数字',
          trigger: ['blur', 'change']
        },
        'bank.mobile': {
          type: 'number',
          required: true,
          message: '请填写预留手机号码,必须是数字',
          trigger: ['blur', 'change']
        },
        amount: {
          type: 'number',
          required: true,
          message: '请填写提现金额,必须是数字',
          trigger: ['change']
        }
      },
      data: {
        user: {},
        balance: 0,
        set: {}
      },
      postForm: {
        bank: {}
      }
    }
  },
  mounted() {
    this.fetch()
  },
  methods: {
    fetch() {
      serviceModel.cashFetch().then(response => {
        let { data } = response
        data = base64.parse(data)
        // console.log(data)
        this.data = data
        this.postForm.amount = +data.set.mini
        if (data.bank && data.bank.bank_number) {
          this.postForm.bank = data.bank
        }
      })
    },
    save() {
      this.$refs.uForm.validate().then(res => {
        if (res) {
          const mini = +this.data.set.mini
          const amount = +this.postForm.amount
          const balance = +this.data.balance
          // console.log(amount, mini, balance)
          if (amount < mini || amount > balance) {
            return this.$refs.uToast.show({
              type: 'error',
              icon: false,
              message: '提现金额错误',
            })
          }
          serviceModel.cashSave({
            ...this.postForm
          }).then(() => {
            this.$refs.uToast.show({
              type: 'success',
              message: '提现成功',
              duration: 200,
              iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
              complete: () => {
                this.$emit('submit')
              }
            })
          }).catch(e => {
            // console.log(e)
            this.$refs.uToast.show({
              type: 'error',
              message: e,
              duration: 1000,
            })
          })
        }
      }).catch(e => {
      })

    }
  }
}
</script>

<style scoped lang="scss">
.cash-form {
  padding: 20px 10px;
  .tip {
    font-size: 24rpx;
    margin-bottom: 10px;
    view {
      height: 20px;
    }
    .title {
      font-weight: 700;
    }
  }
  .form {
    padding-top: 10px;
    .btn {
      margin-top: 10px;
    }
  }
}
</style>
